<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
</head>
<body style="background:lightblue">
<!--    <div th:include="back/common/css_js :: main"></div>-->
<div class="container" >
    <h4>游客注册信息</h4>
    <div class="mt-4" style="text-align: center">
        <img th:src="@{/img/ali.jpg}" style="border-radius: 50%;border: 3px solid lightgreen" width="80" height="80">
    </div>

    <form class="Huiform" action="/back/login/lll" method="post" style="margin-right: 200px">
        <table class="table table-bg" style="width: 50%;margin-left: 40%;margin-top: 50px">
            <tbody>
            <tr>
                <th class="text-r" width="30%" style="border-top: 0px;text-align: right">用户名</th>
                <!--dataType="4-16" 检测是否为4到16位任意字符-->
                <td style="border-top: 0px">
                    <input name="username" id="username" class="input-text" type="text" autocomplete="off"
                           placeholder="请输入用户名" tabindex="1" datatype="*4-16" nullmsg="请输入用户名"
                           errormsg="4-16个字符，请区分大小写">
                </td>
            </tr>

            <tr>
                <th class="text-r" style="border-top: 0px;text-align: right">设置密码</th>
                <!--datatype="n4-16" 检测是否为4到16的任意数字-->
                <td style="border-top: 0px">
                    <input name="password" id="password" class="input-text" type="password"
                           autocomplete="off" placeholder="请设置密码" tabindex="3" datatype="n4-16"
                           nullmsg="请输入您的密码！" errormsg="4-16个数字">
                </td>
            </tr>

            <tr>
                <th class="text-r" style="border-top: 0px;text-align: right">请确认密码</th>
                <!--datatype="n4-16" 检测是否为4到16的任意数字-->
                <td style="border-top: 0px">
                    <input name="password1" recheck="password" class="input-text" type="password"
                           autocomplete="off" placeholder="请确认密码" tabindex="3" datatype="n4-16"
                           nullmsg="请输入您的密码" errormsg="再次输入的密码需要一致！">
                </td>
            </tr>

            <tr>
                <td style="border-top: 0px">
                    <input name="role"  class="input-text" type="hidden" value="游客">
                </td>
            </tr>
                <div style="color: red">
                    <span th:text="${model}"></span>
                </div>
            <tr>
                <th style="border-top: 0px"></th>
                <td style="border-top: 0px">
                    <button style="text-align: left" type="submit" class="btn btn-success radius" id="admin-password-save"
                            name="admin-password-save"  onclick="confirm()"><i class="icon-ok"></i>确定</button>
                </td>
            </tr>

            </tbody>
        </table>
    </form>
</div>
<script>
    function confirm() {
        parent.alert("恭喜您注册成功")
    }

</script>

</body>
</html>
</body>
</html>